{% extends "base.html" %}

{% block title %}IP配置{% endblock %}

{% block header %}IP配置{% endblock %}

{% block content %}
    <div class="container" style="padding: 20px;display: block;">
        <div class="button-group" style="gap: 10px; margin-bottom: 20px;">
            <button onclick="window.location.href='/add_ip'" class="btn btn-primary" style="background-color: #007bff; border-color: #007bff; padding: 8px 16px;">添加新数据</button>
            <button onclick="queryIPs()" class="btn btn-primary" style="background-color: #28a745; border-color: #28a745; padding: 8px 16px;">查询</button>
        </div>
        <table class="table table-striped" style="border: 1px solid #ddd; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>线别</th>
                    <th>IP地址</th>
                    <th>测试软件</th>
                    <th>产品类型</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for ip in ip_list %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ ip.line }}</td>
                    <td>{{ ip.address }}</td>
                    <td>{{ ip.software }}</td>
                    <td>{{ ip.product_type }}</td>
                    <td>
                        <a href="{{ url_for('edit_ip', id=ip.id) }}" class="btn btn-sm btn-warning">编辑</a>
                        <a onclick="deleteIP('{{ ip.id }}')" class="btn btn-sm btn-danger">删除</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <script>
        function queryIPs() {
            fetch('/query_ips')
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    const tbody = document.querySelector('tbody');
                    tbody.innerHTML = '';
                    data.forEach((ip, index) => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${index + 1}</td>
                            <td>${ip.line}</td>
                            <td>${ip.address}</td>
                            <td>${ip.software}</td>
                            <td>${ip.product_type}</td>
                            <td>
                                <a href="/edit_ip/${ip.id}" class="btn btn-sm btn-warning">编辑</a>
                                <a href="/delete_ip/${ip.id}" class="btn btn-sm btn-danger">删除</a>
                            </td>
                        `;
                        tbody.appendChild(row);
                    });
                });
        }
        
        function deleteIP(id) {
            fetch('/delete_ip/' + id, {
                method: 'DELETE'
            })
            .then(response => {
                if (response.ok) {
                    queryIPs();
                }
            });
        }
    </script>
{% endblock %}